<template>
  <div class="charBase" >
    <beautiful-chat
        class="charBase"
        :participants="participants"
        :onMessageWasSent="onMessageWasSent"
        :messageList="messageList"
        :newMessagesCount="newMessagesCount"
        :isOpen="isChatOpen"
        :close="closeChat"
        :open="openChat"
        :showEmoji="true"
        :showFile="false"
        :showEdition="true"
        :showDeletion="true"
        :showTypingIndicator="showTypingIndicator"
        :showLauncher="true"
        :showCloseButton="true"
        :colors="colors"
        :alwaysScrollToBottom="alwaysScrollToBottom"
        :disableUserListToggle="false"
        :messageStyling="messageStyling"
        @onType="handleOnType"
        @edit="editMessage" >
<!--        :titleImageUrl="titleImageUrl"-->

      <template v-slot:header>
        <img :src="participants[0].imageUrl" class="sc-header--img" style="width: 40px;" alt="" />
        <div data-v-61edfd75="" class="sc-header--title enabled"> Al assistant </div>
      </template>

      <template v-slot:system-message-body="{ message }">
        [System]: {{message.text}}
      </template>

<!--      <template v-slot:text-message-body="{ message }">-->
<!--        <small style="background:red" v-if="message.meta">-->
<!--          {{message.meta}}-->
<!--        </small>-->
<!--        <small v-else >-->
<!--          {{message.data.text}}-->
<!--        </small>-->
<!--      </template>-->
    </beautiful-chat>
<!--        :icons="icons"-->
  </div>
</template>

<script>
import Vue from 'vue'
import ChatTalk from 'vue-beautiful-chat'
Vue.use(ChatTalk)
export default {
  name: "charBase",
  data() {
    return {
      participants: [
        {
          id: 'user1',
          name: 'Al assistant',
          imageUrl: './pin/iconImg.jpg'
        },
        // {
        //   id: 'user2',
        //   name: 'Support',
        //   imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
        // }
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      // titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',  //标头头像
      messageList: [
        { type: 'text', author: `user1`, data: { text: `hello~` },meta:true  },

        // { type: 'system', author: `user1`, data: { text: `hello~` },meta:true  }
      ], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: 0,
      isChatOpen: false, // to determine whether the chat window should be open or closed
      showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        launcher: {
          bg: '#4e8cff'
        },
        messageList: {
          bg: '#ffffff'
        },
        sentMessage: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        receivedMessage: {
          bg: '#eaeaea',
          text: '#222222'
        },
        userInput: {
          bg: '#f4f7f9',
          text: '#565867'
        }
      }, // specifies the color scheme for the component
      alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
    }
  },
  methods: {
    sendMessage (text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
        this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
      }
    },
    onMessageWasSent (message) {
      // called when the user sends a message
      this.messageList = [ ...this.messageList, message ];
      console.log(message);
      if(message.data.text){
        this.mapTalksApi(message.data.text)
      }
    },
    openChat () {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat () {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false
    },
    handleScrollToTop () {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType () {
      // console.log('Emit typing event')
      // console.log("asdfsadf")
    },
    editMessage(message){
      const m = this.messageList.find(m=>m.id === message.id);
      m.isEdited = true;
      m.data.text = message.data.text;
    },
    //地理洞察智能系统
    mapTalksApi(str){
      // return fetch('./gisgpt', {
      return fetch('http://101.227.48.161:7000/gisgpt', {
        method: 'post',
        body: JSON.stringify({
          // text: "查找天津站附近的派出所",
          text: str,
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      })
      // .then((response) => response.json())
      .then((res)=> {return  res.json()})
      .then(dataa=>{
        //是否正确返回
        if(dataa&&dataa.geojson.features.length){
          let str2arr = dataa.res_text.split('\n')
          str2arr.forEach(E=>{
            if(E) this.messageList = [ ...this.messageList, { type: 'text', author: `user1`, data: { text: E },meta:true  } ];
          })
          this.$emit('refeshPoint',dataa.geojson)
        }else {
          this.messageList = [ ...this.messageList, { type: 'text', author: `user1`, data: { text: `查询结果为空，请重新提问` },meta:true  } ];
        }
      })
    }
  }
}
</script>

<style scoped>
.charBase{
  height: 100%;
  width: 100%;
}
</style>
